<!--
 * @Author: Lzx
 * @Date: 2022-04-19 22:23:59
 * @LastEditors: Lzx
 * @LastEditTime: 2022-04-23 15:01:27
 * @FilePath: /web-vue/src/pages/Index/index.vue
 * @Description: 民宿服务平台-首页
-->
<template>
  <div>
    <el-row class="data-table row-panel row-panel-first">
      <el-col>
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"><i class="el-icon-date"></i>^_^</span>
            <el-carousel indicator-position="outside" type="card">
              <el-carousel-item v-for="(url, index) in tableData" :key="index">
                <el-image :src="`${$store.state.API_ROOT}${url}`"></el-image>
              </el-carousel-item>
            </el-carousel>
            <el-form :model="queryForm" size="medium" :inline="true">
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="queryDataBtn()"
                  :loading="requestLoading"
                  >刷新
                </el-button>
              </el-form-item>
            </el-form>
            <el-divider content-position="left">
            </el-divider>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "indexIndividualMail",
  components: {
  },

  data() {
    return {
      // 分页参数
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      // 【门户首页】数据表
      tableData: [],
      // 【门户首页】表已选 IDs
      tableCheckIds: [],
      // 数据加载
      requestLoading: false,
      // 查询表单参数
      queryForm: {
        id: null,
        title: null,
        sendUserId: null,
        sendUser: null,
        sendTime: null,
        appendFile: null,
      },
    };
  },

  // 组件创建时
  created() {
    // 页面元素初始化
  },

  // 组件挂载时
  mounted() {
    // 初始化字典
    this.queryDataBtn();
  },

  methods: {
    // 表单提交后置处理
    afterSubmitHandle() {
      this.queryIndexDataApi();
      this.tableCheckIds = [];
    },

    // 处理表格行多选
    handleTableRowsSelect(val) {
      let ids = [];
      val.forEach((obj) => ids.push(obj.mailAdviceId));
      this.tableCheckIds = ids;
    },

    // ---------------- 分页参数处理 START-----------------
    handleCurrentPageChange(val) {
      this.page.currentPage = val;
      // 查询【门户首页】表
      this.queryIndexDataApi();
    },
    handlePageSizeChange(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
      // 查询【门户首页】表
      this.queryIndexDataApi();
    },
    // ---------------- 分页参数处理 END-----------------

    // 查询【门户首页】
    queryDataBtn() {
      this.page.currentPage = 1;
      this.queryIndexDataApi();
    },

    // 删除数据后：最后一页逻辑处理、表格更新
    afterDelete(deleteCount) {
      // 最后一页（旧）
      let oldLastPage = Math.ceil(this.page.total / this.page.pageSize);
      // 最后一页（新）
      let currLastPage = Math.ceil(
        (this.page.total - deleteCount) / this.page.pageSize
      );
      // 如果删除最后一页，则将当前页更新为最新的最后一页
      if (this.page.currentPage == oldLastPage) {
        this.page.currentPage = currLastPage == 0 ? 1 : currLastPage;
      }
      // 更新表格
      this.queryIndexDataApi();
    },

    // 查询参数处理
    queryParamProcess() {
      let param = {};
      param["pageNum"] = this.page.currentPage;
      param["pageSize"] = this.page.pageSize;

      param["imageStatus"] = 1;

      return param;
    },

    // 查询【门户首页】API
    queryIndexDataApi() {
      this.requestLoading = true;
      let vueIns = this; // 局部变量指向当前 Vue 实例，解决 catch 块中的this引用为 undefined
      this.$api
        .queryIndexCarousel(this.queryParamProcess())
        .then((res) => {
          this.tableData = [];
          this.page.total = 0;

          let { status, message, data } = res.data;
          if (status == 200) {
            this.tableData = data.items.map((o) => o.imageUrl);
            this.page.total = data.totalNum;
          } else if (status == 403) {
            this.$message({
              message: `权限不足！${message}`,
              type: "error",
              center: true,
              duration: 1680,
            });
          } else {
            this.$alert(`暂无数据记录！${message}`, "【门户首页】信息表", {
              type: "info",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }

          this.requestLoading = false;
        })
        .catch(function (err) {
          vueIns.requestLoading = false;
          console.log(`【门户首页】查询接口发生错误: ${err}`);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// 表单布局样式
@import "@/assets/css/form-layout.scss";

.time {
  font-size: 13px;
  color: #999;
}

.title {
  height: 66px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  height: 20px;
  overflow: hidden;
}

.button {
  padding: 0;
  float: right;
}

.image {
  height: 120px;
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
